﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/Master/Home.Master" AutoEventWireup="true" CodeBehind="HomeRoute.aspx.cs" Inherits="PaydSystem.UI.Route.HomeRoute" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style>
    .form-text-search  
        {
            height: 34px !important;
            padding: 6px 12px !important;
            font-size:x-large !important;
            line-height: 1.42857143 !important;
            color: #555 !important;
            background-color: #fff !important;
            background-image: none !important;
            border: 1px solid #ccc !important;
            border-radius: 4px !important;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
            -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important;
        }
    #divFooter {
        position: relative;
    }
        
    #divFooter:after
    {
            
        content : "" !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        background-image:url('../../Images/PaydImages/bg_footer.png') !important;
        width: 100% !important;
        height: 100% !important;
        max-width:100% !important;
        /*opacity : 0.4;*/
        z-index: -1 !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
        background-position:top !important;
    }
    
    /*#home_th {
         width:16px;
         height:100px;
         display:block;
         background:url('../../Images/PaydImages/home.png') center top no-repeat;
        }*/
    
    /*.home_th:hover
    {*/
        /*display:none !important;*/
        /*width:16px;
        height:100px;*/
        /*background-image: url('../../Images/PaydImages/home.png') !important;*/
    /*}*/
    /*.about_th
    {
        width:16%;
        height:100px;
        background-image: url('../../Images/PaydImages/about.png') !important;
    }
    .profile_th
    {
        width:16%;
        height:100px;
        background-image: url('../../Images/PaydImages/profile.png') !important;
    }
    .dictionary_th
    {
        width:16%;
        height:100px;
        background-image: url('../../Images/PaydImages/dictionary.png') !important;
    }
    .question_th
    {
        width:16%;
        height:100px;
        background-image: url('../../Images/PaydImages/question.png') !important;
    }
    .contact_th
    {
        width:16%;
        height:100px;
        background-image: url('../../Images/PaydImages/contact.png') !important;
    }
    .home_th:hover
    {
        background-image: url('../../Images/PaydImages/home_active.png') !important;
    }
    .about_th:hover
    {
        background-image: url('../../Images/PaydImages/about_active.png') !important;
    }
    .profile_th:hover
    {
        background-image: url('../../Images/PaydImages/profile.png') !important;
    }
    .dictionary_th:hover
    {
        background-image: url('../../Images/PaydImages/dictionary_active.png') !important;
    }
    .question_th:hover
    {
        background-image: url('../../Images/PaydImages/question_active.png') !important;
    }
    .contact_th:hover
    {
        background-image: url('../../Images/PaydImages/contact_active.png') !important;
    }*/
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div class="container" ng-init="init();" >
        
        <div style="text-align:left" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <a href="javascript:void(0);" ng-click="setLanguageThai();" >
                <img src="../../Images/PaydImages/thai_language.png" style="width:36px;height:42px"  />
            </a>
            <img src="../../Images/PaydImages/ver_line.png" style="width:20px;height:42px"  />
            <a href="javascript:void(0);" ng-click="setLanguageEng();">
                <img src="../../Images/PaydImages/eng_language.png" style="width:36px;height:42px" /></a>
            {{language}}
            <a href="javascript:void(0);"><img src="../../Images/PaydImages/facebook_icon.png" style="width:36px;height:42px" /></a>
            <a href="javascript:void(0);">
                <img src="../../Images/PaydImages/twitter_icon.png" style="width:36px;height:42px" /></a>
            <a href="javascript:void(0);">
                <img src="../../Images/PaydImages/Intragram_icon.png" style="width:36px;height:42px" /></a>
        </div>
        <div style="text-align:right" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            {{lWelcome + " " + headerName}}
            <a class="btn btn-danger" style="padding-bottom:0px;padding-top:0px;margin-bottom:2px;margin-top:2px" ng-show="showLogout" ng-click="doLogout();">{{lLogout}}</a>
        </div>
        <div style="text-align:right" >
            <img src="../../Images/PaydImages/tel_num.png" style="width:120px;height:36px" />
            <input class="form-text-search"  placeholder="Search here" type="text" maxlength="200" style="width:200px;height:36px" ng-keyup="($event.keyCode == 13) && searchAction();" ng-model="searchKeyword" />
            <a href="javascript:void(0);"><img src="../../Images/PaydImages/search_icon.png" style="width:36px;height:36px" ng-click="searchAction();" /></a>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-sx-4" style="text-align:left">
                <a href="javascript:void(0);"><img src="../../Images/PaydImages/Aioi_brand.png" style="width:47%;height:120px" /></a><img src="../../Images/PaydImages/line_brand.png" style="width:6%;height:80px" /><a ng-href="#/home"><img
                    src="../../Images/PaydImages/payd_brand.png" style="width:47%;height:120px" /></a>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-8 col-sx-8">
                
            </div>
            <div class="col-lg-7 col-md-7 col-sm-12 col-sx-12" style="text-align:right"  >
                <a href="#/home" id="home_th" ng-mouseover="doHomeHover()" ng-mouseleave="doHomeNotHover()" ng-click="doselHome();">
                    <img src="../../Images/PaydImages/home.png" style="width:8%;height:30%" ng-hide="activeHomeIcon"   />
                    <img src="../../Images/PaydImages/home_active.png" style="width:16%;height:100px" ng-show="activeHomeIcon"  />
                </a>
                <a href="#/About" class="about_th" ng-mouseover="doAboutHover()" ng-mouseleave="doAboutNotHover()" ng-click="doselAbout();">
                    <img src="../../Images/PaydImages/about.png" style="width:15%;height:30%"  ng-hide="activeAboutIcon" />
                    <img src="../../Images/PaydImages/about_active.png" style="width:19%;height:100px" ng-show="activeAboutIcon"  />
                </a>
                <a href="javascript:void(0);" class="profile_th" ng-mouseover="doProfileHover()" ng-mouseleave="doProfileNotHover()" ng-click="doPermisionProfile();">
                    <img src="../../Images/PaydImages/profile.png" style="width:15%;height:30%" ng-hide="activeProfileIcon"  />
                    <img src="../../Images/PaydImages/profile_active.png" style="width:19%;height:100px" ng-show="activeProfileIcon" />
                </a>
                <a href="#/Dictionary" class="dictionary_th" ng-mouseover="doDictionaryHover()" ng-mouseleave="doDictionaryNotHover()" ng-click="doselDictionary();">
                    <img src="../../Images/PaydImages/dictionary.png" style="width:15%;height:30%" ng-hide="activeDictionaryIcon" />
                    <img src="../../Images/PaydImages/dictionary_active.png" style="width:23%;height:100px" ng-show="activeDictionaryIcon"  />
                </a>
                <a href="#/Question" class="question_th" ng-mouseover="doQuestionHover()" ng-mouseleave="doQuestionNotHover()" ng-click="doselQuestion();">
                    <img src="../../Images/PaydImages/question.png" style="width:8%;height:30%" ng-hide="activeQuestionIcon" />
                    <img src="../../Images/PaydImages/question_active.png" style="width:16%;height:100px" ng-show="activeQuestionIcon" />
                </a>
                <a href="#/Contact" class="contact_th" ng-mouseover="doContactHover()" ng-mouseleave="doContactNotHover()" ng-click="doselContact();">
                    <img src="../../Images/PaydImages/contact.png" style="width:9.5%;height:30%" ng-hide="activeContactIcon"  />
                    <img src="../../Images/PaydImages/contact_active.png" style="width:20%;height:100px" ng-show="activeContactIcon"  />
                </a>
                
            </div>
        </div>
    </div>
    
    <div data-ng-view></div>
    
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="divFooter" style="min-height:320px;" >
        <div class="form-group" style="width:90%" >
            <div style="width:60%;text-align:left; margin-left:50px; margin-top:30px;">
                <a href="#/home" ng-click="doselHome();" >
                    <img src="../../Images/PaydImages/home-footer.png" style="width:17%;height:10%;margin-top:50px" /></a>
            </div>
            <%--<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="top:50px">
                <span>&nbsp; </span>
            </div>--%>
        </div>
        <div class="form-group" >
            <div style="width:70%;text-align:left; margin-left:50px;">
                <a href="#/About" ng-click="doselAbout();">
                <img src="../../Images/PaydImages/about-footer.png" style="width:18%;height:7%" /></a>
                <a href="javascript:void(0);" ng-click="doPermisionProfile();">
                <img src="../../Images/PaydImages/profile-footer.png" style="width:18%;height:7%" /></a>
                <a href="#/Dictionary" ng-click="doselDictionary();">
                    <img src="../../Images/PaydImages/dictionary-footer.png" style="width:18%;height:7%" /></a>
                <a href="#/Question" ng-click="doselQuestion();">
                    <img src="../../Images/PaydImages/question-footer.png" style="width:18%;height:7%" /></a>
                <a href="#/Contact" ng-click="doselContact();">
                    <img src="../../Images/PaydImages/contact-footer.png" style="width:18%;height:7%" /></a>
            </div>
            <br />
            
            <div style="text-align:left; margin-left:50px">
                <img src="../../Images/PaydImages/login-02_52.png" style="width:35%;height:80px" />
            </div>
            <%--<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                &nbsp;
            </div>--%>
            <br />
            <div style="width:100%;"  >
                <div style="width:60%;text-align:left; margin-left:50px;">
                    <a href="javascript:void(0);" >
                        <img src="../../Images/PaydImages/condition-footer.png" style="width:22%;height:7%;" /></a>
                    <a href="javascript:void(0);" >
                        <img src="../../Images/PaydImages/policy-footer.png" style="width:22%;height:7%;" /></a>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
